<template>
  <div class="editCompany">
    <el-form ref="company" :model="company" label-width="100px" :rules="rules">
      <el-form-item label="企业名称" prop="title">
        <el-input v-model="company.title"></el-input>
      </el-form-item>
      <el-form-item label="企业规模" prop="scale">
        <el-select v-model="company.scale" placeholder="请选择活动区域">
          <el-option v-for="(item,index) in scaleArr" :key="index" :label="item" :value="index+1"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="地图选择" prop="name">
        <div style="display:flex;width:100%">
          <el-input v-model="company.name"></el-input>
          <a href="javascript:void(0)">
            <div
              class="submitBtn"
              style="cursor:hand"
              @click="openMapFn(cityInfo,'selectCity')"
            >地图选择</div>
          </a>
        </div>
      </el-form-item>-->
      <el-form-item label="企业地址" prop="address">
        <el-input v-model="company.address"></el-input>
      </el-form-item>
      <el-form-item label="企业介绍" prop="description">
        <el-input type="textarea" v-model="company.description" rows="8"></el-input>
      </el-form-item>
      <el-form-item label="企业环境">
        <el-upload
          :action="upLoadUrl"
          list-type="picture-card"
          multiple
          :file-list="fileList"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
      </el-form-item>
      <el-form-item label="企业资质">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :multiple="false"
          :file-list="preLicense"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="licenseSuccess"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
      </el-form-item>
      <el-form-item>
        <div class="btnBlock">
          <a href="javascript:void(0)" @click="confirm">
            <div class="submitBtn" style="cursor:hand">立即{{type == create ? '创建':'保存'}}</div>
          </a>
        </div>
      </el-form-item>
    </el-form>
    <wxmap ref="wxmap" @commitMapFn="commitMapFn"></wxmap>
  </div>
</template>

<script>
import { CompanyShow, ShowLicense, Describe } from "~/api/allRequest";
import config from "~/config.js"

export default {
  name: "editCompany",
  data() {
    return {
      rules: {
        title: [{ required: true, message: "请输入企业名称", trigger: "blur" }],
        scale: [{ required: true, message: "请选择企业规模", trigger: "blur" }],
        address: [
          { required: true, message: "请输入企业地址", trigger: "blur" }
        ],
        description: [
          { required: true, message: "请输入企业介绍", trigger: "blur" }
        ]
      },
      companyId: "",
      company: {},
      licenseImg: {},
      scaleArr: ["10人以下", "10-20人", "20-50人", "50-100人", "100以上"],
      dialogImageUrl: "",
      dialogVisible: false,
      fileList: [],
      cityInfo: {
        numPosition: {}
      },
      type: "create",
      preLicense:[],
      upLoadUrl:''
    };
  },
  components: {  },
  beforeCreate() {},
  created() {
    this.upLoadUrl = 'https://job-saas.oss-cn-hangzhou.aliyuncs.com/'
  },
  beforeMount() {},
  mounted() {
    this.type = this.$route.params.type;
    if (localStorage.getItem("company")) {
      this.companyId = localStorage.getItem("company");
      this.getInfo();
    }
  },
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroy() {},
  methods: {
    getInfo() {
      CompanyShow()
        .then(result => {
          let temp = [];
          for (let i = 0; i < result.image.length; i++) {
            let tempObj = {};
            tempObj.name = result.image[i].image_url;
            tempObj.url = result.image[i].image_url;
            temp.push(tempObj);
          }
          this.fileList = temp;
          this.company = result;
        })
        .catch(err => {
          console.log(err);
        });

      ShowLicense()
        .then(result => {
          this.preLicense = [{url:result.auth_image,name:1}]
          this.licenseImg = result;
        })
        .catch(err => {
          console.log(err);
        });
    },
    confirm() {
      Describe()
        .then(result => {
          this.$message.success(
            this.type == "create" ? "已提交申请" : "保存成功"
          );
          this.$router.push({ name: "companyInfo" });
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 地图回调
    commitMapFn(_obj, _index) {
      debugger;
      // console.log(_obj)
      // this.formItem.latitude = _obj.numPosition.lat;
      // this.formItem.longitude = _obj.numPosition.lng;
      // this.formItem.address =
      //   _obj.province + _obj.city + _obj.area + _obj.searchVal;
      // this.getAreaId(_obj.province, _obj.city, _obj.area);
    },
    // 打开地图
    openMapFn(_data, _index) {
      this.$refs.wxmap.openFn(_data, _index);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(response, file, fileList) {
      localStorage.setItem("fileList", JSON.stringify(fileList));
    },
    licenseSuccess(response, file, preLicense){
      this.preLicense = [preLicense[preLicense.length-1]]
    } 
  }
};
</script>

<style scoped lang="less">
@import "./../../../public/less/main.less";
.selected {
  margin-bottom: 0;
  height: auto;
}
.editCompany {
  width: 54%;
  min-height: 800px;
  background: white;
  margin: 1% 0;
  padding: 2% 12%;
  .el-select {
    display: block;
  }
  .btnBlock {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }
}
</style>
